<template>
	<div>
		<cl-crud @load="onLoad">
			<template #table-column-pick="{scope}">
				<el-image style="width: 200px; height: 100px" :src="scope.row.pick"></el-image>
			</template>
		</cl-crud>
	</div>
</template>

<script>
export default {
	data() {
		return {};
	},

	mounted() {},

	methods: {
		onLoad({ ctx, app }) {
			this.crud = app;

			ctx.service(this.$service.goodsMenagement.wxJdActivity)
				.set('table', {
					columns: [
						{
							label: '序号',
							type: 'index',
							align: 'center'
						},
						{
							label: '活动背景图',
							prop: 'pick',
							align: 'center',
							width: 200
						},
						{
							label: '活动名称',
							prop: 'name',
							align: 'center'
						},
						{
							label: '活动商品',
							prop: 'skuIds',
							align: 'center'
						},
						{
							label: '活动链接',
							prop: 'link',
							align: 'center'
						},
						{
							label: '活动创建时间',
							prop: 'createTime',
							align: 'center'
						}
					],

					op: {
						layout: ['edit', 'delete']
					}
				})
				.set('upsert', {
					props: {
						labelWidth: '120px',
						center: true,
						'custom-class': 'custom-class-dialog-mini'
					},
					items: [
						{
							prop: 'name',
							label: '活动名称',
							component: {
								name: 'el-input',
								attrs: {
									size: 'mini',
									placeholder: '请输入活动名称'
								}
							},
							rules: {
								required: true,
								message: '请输入活动名称'
							}
						},
						{
							component:{
								name:'imgSize',
								render(){
									return(
										<div>活动背景图建议尺寸750*422 </div>
									)
								}
							}
						},
						{
							prop: 'pick',
							label: '活动背景图',
							component: {
								name: 'cl-upload'
							},
							rules: {
								required: true,
								message: '图片地址不能为空'
							}
						}
					]
				})

				.set('layout', [
					['refresh-btn', 'add-btn', 'query', 'flex1', 'slot-filter'],
					['data-table'],
					['flex1', 'pagination']
				])
				.done();

			app.refresh();
		}
	}
};
</script>
<style lang="scss" scoped></style>
